<template>
  <div class="full-page bg">
    <h2 class="title">登录</h2>
    <van-form @submit="onSubmit">
      <van-field
        v-model="phone"
        autocomplete="off"
        name="手机号"
        label="手机号"
        :placeholder="msg"
        :rules="[{ pattern, message: getMsg }]"
        left-icon="ziyuanxhdpi"
        @blur="test()"
        @focus="reset()"
      >
        <van-icon
          slot="left-icon"
          class-prefix="icon"
          color="#1989fa"
          class="iconfont"
          name="ziyuanxhdpi"
        ></van-icon>
      </van-field>
      <van-field
        v-model="password"
        :type="pass"
        name="密码"
        label="密码"
        placeholder="输入密码"
        left-icon="a-wode1x"
        @blur="test()"
        :rules="[{ validator }]"
      >
        <van-icon
          slot="left-icon"
          class-prefix="icon"
          color="#1989fa"
          class="iconfont"
          name="a-wode1x"
        />
        <template #right-icon>
          <van-switch v-model="checked" size="24" @click="modifyPsw" />
        </template>
      </van-field>

      <p class="zhu">
        <span @click="registerAction">注册</span
        ><span @click="forgetAction">忘记密码</span>
      </p>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
      <div class="box">
        <div class="left-line"></div>
        <span>其他方式登录</span>
        <div class="right-line"></div>
      </div>
      <div class="share">
        <div class="box1">
          <i class="iconfont icon-weixintubiao"></i>
        </div>
        <div class="box2">
          <i class="iconfont icon-qqtubiao"></i>
        </div>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Form, Field, Button, Toast, Icon, Switch } from "vant";
import { loginApi } from "../api/auth";

export default {
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Toast.name]: Toast,
    [Icon.name]: Icon,
    [Switch.name]: Switch,
  },
  data() {
    return {
      phone: "",
      password: "",
      pattern: /^1\d{10}$/,
      checked: false,
      msg: "输入手机号",
      pass: "password",
    };
  },
  methods: {
    reset() {
      this.msg = "";
    },
    getMsg(value) {
      if (value) {
        Toast("手机11位且为1开头");
        this.phone = "";
      }
    },
    modifyPsw() {
      return this.checked ? (this.pass = "password") : (this.pass = "text");
    },
    forgetAction() {
      this.$router.push();
    },
    test() {
      if (!this.phone) {
        Toast("手机号不能为空");

        return;
      }
    },
    validator(val) {
      if (
        !/^(?![0-9]+$)(?![a-zA-Z]+$)(?![.\W]+$)[0-9A-Za-z.]{6,12}$/.test(val)
      ) {
        Toast("密码长度为6-12位，而且由数字字母.任意两种组成");
      }
    },
    registerAction() {
      this.$router.push("/register");
    },
    forgetAction() {
      this.$router.push("/forgetpsw");
    },
    async onSubmit() {
      const { data, error } = await loginApi({
        phone: this.phone,
        password: this.password,
      });
      console.log(data);
      if (error) {
        Toast("手机号或者密码错误");
        return;
      }
      Toast("登录成功");
      localStorage.setItem("token", data.token);
      this.$store.commit("user/setIsLogin",true)
      this.$router.replace("/").catch(err => {console.log(err);});

      // console.log(55555);
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  height: 1.1733rem;
  text-align: center;
  line-height: 1.1733rem;
  font-size: 0.5333rem;
  background: transparent;
  font-weight: 700;
  font-style: normal;
  font-size: 0.4267rem;
  color: #32354a;
}
.van-form {
  width: 8.9333rem;
  margin: 0 auto;
  margin-top: 4.5rem;
}
.van-cell {
  height: 1.3333rem;
  align-items: center;
  border-radius: 0.2rem;
  margin-bottom: 0.2667rem;
}
.icon-a-wode1x {
  font-size: 0.6667rem;
}
.icon-ziyuanxhdpi {
  font-size: 0.6667rem;
}
.zhu {
  width: 100%;
  height: 0.4267rem;
  display: flex;
  justify-content: space-between;
  span {
    font-size: 0.3733rem;
    color: #fff;
    text-decoration: underline;
  }
}

.van-button--round {
  border-radius: 0px;
  width: 100%;
  border: 2px solid transparent;
}
.van-button--normal {
  font-size: 0.4267rem;
}
.box {
  width: 100%;
  margin-bottom: 0.5333rem;
  height: 0.5333rem;
  // background: #cf8282;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    font-size: 0.3733rem;
    color: #fff;
  }
  .left-line {
    position: absolute;
    left: 0;
    width: 3.0667rem;
    height: 0.0267rem;
    background: #ccc;
  }
  .right-line {
    position: absolute;
    right: 0;
    width: 3.0667rem;
    height: 0.0267rem;
    background: #ccc;
  }
}
.share {
  width: 100%;
  height: 1.1733rem;
  display: flex;
  justify-content: center;
  .box1 {
    width: 1.1733rem;
    height: 1.1733rem;
    background: #3dce3d;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.2667rem;
    border-radius: 50%;
    i {
      font-size: 0.8rem;
      color: #fff;
    }
  }
  .box2 {
    width: 1.1733rem;
    height: 1.1733rem;
    border-radius: 50%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    i {
      font-size: 0.8rem;
      color: #0188fb;
    }
  }
}
</style>